<template>
  <div>
    <!-- 头部组件 -->
    <projectheader />

    <!-- 表单 -->
    <div class="udlite-container partners">
      <van-cell-group>
        <van-field
          v-model="username"
          label="用户名"
          placeholder="请输入用户名"
        ></van-field>
        <van-field
          type="password"
          v-model="password"
          label="密码"
          placeholder="请输入密码"
        ></van-field>
        <van-field
          type="password"
          v-model="password1"
          label="确认密码"
          placeholder="请确认密码"
        ></van-field>
        <van-field v-model="phone" label="手机号" placeholder="请输入手机号"></van-field>
        <van-field v-model="email" label="邮箱" placeholder="请输入邮箱"></van-field>
        <van-field v-model="gender" label="性别" placeholder="请输入性别"></van-field>
        <van-button type="primary" @click="submit">注册</van-button>
        <van-button type="info">重置</van-button>
      </van-cell-group>
    </div>
    <projectfooter />
  </div>
</template>

<script>
import Projectfooter from '../header_folder/projectfooter.vue';
import projectheader from "../header_folder/projectheader.vue";
export default {
  components: { projectheader, Projectfooter },
  data() {
    return {
      username: "",
      password: "",
      password1: "",
      phone:"",
      email:"",
      gender:"",
    };
  },
  methods: {
    submit() {
      if (this.username == "") {
        this.$toast("请输入用户名");
        return false;
      } else if (this.password == "") {
        this.$toast("请输入密码");
        return false;
      } else if (this.password1 == "") {
        this.$toast("请确认密码");
        return false;
      } else if (this.password != this.password1) {
        this.$toast("两次输入的密码不一致");
        return false;
      } else if (this.phone == "") {
        this.$toast("请确认手机号");
        return false;
      } else if (this.email == "") {
        this.$toast("请确认邮箱");
        return false;
      }
      this.axios
        .post("http://127.0.0.1:8000/register/", {
          username: this.username,
          password: this.password,
          phone: this.phone,
          email: this.email,
          gender: this.gender
        })
        .then((resp) => {
          if (resp.data.code == 200) {
            this.$toast(resp.data.msg);
            this.$router.push("/mylogin")
          } 
          else {
            this.$toast(resp.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {},
};
</script>

<style>
</style>